<template>
	<view class="swiper">
		<swiper 
		:indicator-dots="bannerOptions.indicatorDots" 
		:autoplay="bannerOptions.autoplay" 
		:interval="bannerOptions.interval" 
		:circular="bannerOptions.circular"
		:duration="bannerOptions.duration"
		:style="{width: bannerWidth ? bannerWidth + 'rpx' : '100vw', height: bannerHeight + 'rpx'}"
		>
			<swiper-item v-for="(bannerItem, bannerIndex) in bannersList" :key="bannerIndex">
				<view class="swiper-item"><image :src="bannerItem.image" mode="aspectFill"></image></view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "m-banner",
		data() {
			return {
				bannersList: [],
				bannerWidth: 0,
				bannerHeight: 320,
				bannerOptions: {
					indicatorDots: true,
					autoplay: true,
					interval: 3000,
					duration: 1000,
					circular: true,
				},
			};
		},
		props: {
			limit: {
				type: Number,
				default: 5
			},
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 320
			},
			options: {
				type: Object,
				default: {},
			}
		},
		async mounted() {
			this.bannerWidth = this.width;
			this.bannerHeight = this.height;
			for(let option in this.options){
				this.bannerOptions[option] = this.options[option];
			}
			await this.bannerListsDataLoadHandleFunc();
		},
		methods: {
			async bannerListsDataLoadHandleFunc(){
				console.log(this);
				let response = await this.http({
					url: 'banners/index',
					data: {limit: this.limit}
				});
				if(response.status !== 0){
					return false;
				}
				this.bannersList = response.result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		width: 100vw;
		height: 320rpx;
		swiper{
			width: inherit;
			height: inherit;
			swiper-item{
				width: inherit;
				height: inherit;
				.swiper-item{
					width: inherit;
					height: inherit;
					image{width: inherit;height: inherit;}
				}
			}
		}
	}
</style>
